<template>
	<view class="content">
		<view class="banner-wrap">
			<image class="banner-img" :src="groupInfo.avatar" mode="aspectFill"></image>
			<view class="goback" @click="goback">
				<image src="../../static/img/user_home/goback.png" mode="widthFix"></image>
				返回
			</view>
			<view class="group-info">
				<text class="group-name">{{groupInfo.name}}</text>
				<text class="group-id">{{groupInfo.groupID}}</text>
			</view>
		</view>
		<view class="group-box">
			<text class="title">群简介</text>
			<text class="desc">{{groupInfo.introduction}}</text>
		</view>
		<!-- 群用户 -->
		<view class="group-box" style="padding-top: 36rpx;">
			<view class="title">群成员
				<text class="cont-p">({{groupInfo.memberCount}}位)</text>
				<view class="see-all" v-if="memberList.length > 30" @click="seeall">全部<image src="/static/img/group/see_all.png"></image></view>
			</view>
			<view class="lists">
				<view  class="lists-item" v-for="(item, i) in memberList" :key="i">
					<image :src='item.avatar'></image>
					<view class="item-owner" v-if="item.role=='Owner'">群主</view>
					<view class="item-name">{{item.nick}}</view>
				</view>
				
				<view  class="lists-item" @click="adduser('1')" v-if="isowner">
					<image src="/static/img/group/tianjia.png"></image>
					<view class="item-name">增加群成员</view>
				</view>
				<view  class="lists-item" @click="adduser('0')" v-if="isowner">
					<image src="/static/img/group/jianshao.png"></image>
					<view class="item-name">移除群成员</view>
				</view>
				
			</view>
		</view>
		
		<view class="btn-wrap">
			<button type="primary" @click="quitgroup" v-if="isjoin && !isowner">退出群聊</button>
			<button type="primary" @click="joinGroupModal" v-if="!isjoin">加入群聊</button>
			<button type="primary" @click="dissgroup" v-if="isowner">解散该群</button>
		</view>
	</view>
</template>

<script>
	import util from "@/common/util.js"
	export default {
		data() {
			return {
				myInfo: {},
				info: {},
				groupInfo: {
					groupID: '',
					name: '',
					avatar: '',
					introduction: '',
					memberCount:0,   //群成员数量
				},
				groupOwner: {},
				joingroup: 1,
				// 是否加入群聊
				isjoin:false,
				isowner:false,  //是否是群主
				memberList:[],  // 群成员信息
			}
		},
		onLoad(options) {
			this.info = JSON.parse(options.group)
			this.groupInfo.groupID = this.info.id;
			this.groupInfo.name = this.info.name;
			this.groupInfo.avatar= this.info.avatar;
			uni.getStorage({
				key: 'myInfo',
				success: res => {
					this.myInfo = res.data;
					console.log('用户自己信息',this.myInfo)
				}
			});
			
		},
		onReady() {
			uni.hideTabBar();
			// this.getGroupInfo();
			var that=this;
			
			// 获取群详细信息
			that.getGroupProfile(that.groupInfo.groupID);  
			
			//获取群成员信息
			that.$tim.getGroupMemberList({
				groupID: this.groupInfo.groupID+'',
			    count: 30, 
				offset:0 }// 从0开始拉取30个群成员
			).then(function(imResponse) {
				console.log('获取群成员列表',imResponse.data)
				var listarr=imResponse.data.memberList;
				that.memberList = listarr;
				listarr.map(item=>{
					
					if(item.userID == that.IDBEFORE+that.myInfo.id){
						that.isjoin=true;
						return;
					}
				})
			}).catch(function(imError) {
				
				uni.showToast({
					title: imError,
					position: 'bottom',
					icon: 'none'
				})
			});	
			
			
		},
		methods: {
			
			goback: function () {
				uni.navigateBack({
					delta: 1
				})
			},
			
			getGroupInfo: function () {
				// console.log(this.IDBEFORE+this.groupInfo.groupID)
				this.$api.api.ajaxData({
					method: 'V1.GroupInfo',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					gid: this.info.id,
				}, res => {
					uni.hideLoading();
					if (res.status) {
						console.log('返回群组信息',res)
						
						// this.joingroup = res.extra.joingroup;

					}
				})
			},
			
			joinGroupModal: function () {
				uni.showModal({
					title: '',
					content: '确定支付' + this.joingroup + '支米币加入群聊吗？',
					success: res => {
						if (res.confirm) {
							this.setJoinGroupFriend();
						}
					}
				});
			},
			// 解散群
			dissgroup(){
				this.$tim.dismissGroup(this.groupInfo.groupID+'').then(function(imResponse) { // 解散成功
				
				    // 跳转消息页面
				    uni.switchTab({
						url:"message"
					})
				  
				}).catch(function(imError) {
				    // console.warn('解散群组失败','dismissGroup error:', imError); // 解散群组失败的相关信息
					uni.showToast({
						title: imError,
						position: 'bottom',
						icon: 'none'
					})
				});
			},
			setJoinGroupFriend: function () {
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.JoinGroupFriend',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					touid: this.info.id,
					type: 'group',
					ispay: 1
				}, res => {
					uni.hideLoading();
					if (res.status) {
						let applyMessage = {
							id: this.myInfo.id,
							name: this.myInfo.name,
							avatar: this.myInfo.avatar,
						}
						this.$tim.joinGroup({
							groupID: this.groupInfo.groupID + '',
							applyMessage: JSON.stringify(applyMessage)
						}).then(imResponse => {
							console.log('申请加群成功', imResponse)
							switch (imResponse.data.status) {
								case this.TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: 
									uni.showToast({
										title: '申请成功，请耐心等待管理员同意',
										position: 'bottom',
										icon: 'none'
									})
									setTimeout(() => {
										this.goback();
									}, 1000)
								break;
								case this.TIM.TYPES.JOIN_STATUS_SUCCESS:
									uni.showToast({
										title: '加入群组成功',
										position: 'bottom',
										icon: 'none'
									})
									setTimeout(() => {
										this.goback();
									}, 1000)
								break;
								default:
								break;
							}
						}).catch(imError => {
							console.warn('申请加群失败', imError); 
						});
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						})
					}
				})
			},
			
			// 获取群详细信息
			getGroupProfile(groupid){
				this.$tim.getGroupProfile({
					groupID: groupid + '',
				}).then(imResponse => {
				  const group = imResponse.data.group;
				  //群组id
				  if(group.ownerID==this.IDBEFORE+this.myInfo.id){
					  this.isowner=true;
				  }
				  this.groupOwner = group.ownerID;   
				  this.groupInfo.avatar = !!group.avatar ? group.avatar:this.groupInfo.avatar;
				  this.groupInfo.introduction = group.introduction;
				  this.groupInfo.memberCount = group.memberCount;
				  console.log('群嘻嘻',imResponse.data);
				}).catch(imError => {
					uni.showToast({
						title: imError,
						position: 'bottom',
						icon: 'none'
					})
				    // console.warn('搜素群组失败', imError);
				});
			},
			
			// 添加、移除群成员
			adduser(datas){
				var newarr=[];
				this.memberList.map(item=>{
					if(item.role!='Owner'){
						newarr.push(item);
					}
				})
				
				uni.navigateTo({
					url: 'invite?groupid=' + this.groupInfo.groupID+'&types='+datas+'&memberList='+JSON.stringify(newarr)
				});
			},
				
			// 查看所有群成员
			seeall(){
				if(!this.isjoin){
					uni.showToast({
						title: '您不是群成员，没有权限查看群成员信息',
						position: 'bottom',
						icon: 'none'
					})
				}else{
					var that=this;
					//获取群成员信息
					that.$tim.getGroupMemberList({
						groupID: this.groupInfo.groupID+'',
					    count: 100, 
						offset:30 }// 从0开始拉取30个群成员
					).then(function(imResponse) {
						
						var listarr=imResponse.data.memberList;
						that.memberList = that.memberList.concat(listarr);
						listarr.Map(item=>{
							if(item.userID==that.IDBEFORE+that.myInfo.id){
								that.isjoin=true;
								return;
							}
						})
					}).catch(function(imError) {
						
						uni.showToast({
							title: imError,
							position: 'bottom',
							icon: 'none'
						})
					});	
				}
			},
			// 退出	群聊
			quitgroup(){
				this.$tim.quitGroup(this.groupInfo.groupID+'').then(function(imResponse) {
				 
				    uni.showToast({
						title: '退出群聊成功',
						position: 'bottom',
						icon: 'none'
				    })
					setTimeout(() => {
						uni.switchTab({
							url:"message"
						})
					}, 1000)
					
					
				}).catch(function(imError){
					  uni.showToast({
						title: imError,
						position: 'bottom',
						icon: 'none'
					  })
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		height: 100%;
	}
	.banner-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.banner-img {
			width: 750rpx;
			height: 550rpx;
		}
		.goback {
			display: flex;
			justify-content: center;
			align-items: center;
			// width: 24rpx;
			// height: 40rpx;
			padding-top: var(--status-bar-height);
			position: absolute;
			left: 40rpx;
			top: 72rpx;
			color: #fff;
			font-size: 30rpx;
			line-height: 40rpx;
			
			image {
				width: 24rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
		.group-info {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			width: 100%;
			height: 120rpx;
			background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
			padding: 0 36rpx;
			position: absolute;
			box-sizing: border-box;
			left: 0;
			bottom: 0;
			.group-name {
				font-size: 36rpx;
				color: #FFFFFF;
			}
			.group-id {
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
	.group-box {
		// display: flex;
		// flex-direction: column;
		// justify-content: flex-start;
		// align-items: flex-start;
		width: 100%;
		// flex: 1;
		box-sizing: border-box;
		padding: 20rpx 36rpx;
		background-color: #FFFFFF;
		.title {
			font-size: 32rpx;
			color: #1e1e1e;
			padding-left: 18rpx;
			display: block;
			.cont-p{
				font-size: 30rpx;
				color: #fa73a3;
				line-height: 32rpx;
			}
			.see-all{
				float: right;
				font-size: 28rpx;
				color: #9b9b9b;
				line-height: 32rpx;
				padding-top: 16rpx;
				>image{
					width: 18rpx;
					height: 30rpx;
					vertical-align: bottom;
					margin-left: 10rpx;
				}
			}
		}
		.desc {
			padding-left: 22rpx;
			font-size: 26rpx;
			color: #848484;
			display: block;
		}
		// 群成员
		.lists{
			padding: 0 36rpx;
			display: inline-block;
			>.lists-item{
				float: left;
				margin-left: 40rpx;
				text-align: center;
				position: relative;
				margin-top: 34rpx;
				&:nth-child(4n+1){
					margin-left: 0rpx !important;
				}
				>image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.item-owner{
					position: absolute;
					width: 90rpx;
					border-radius: 16rpx;
					height: 33rpx;
					top:87rpx ;
					left: 15rpx;
					background-color:#ffb85c !important;
					color: #fff !important;
					font-size: 24rpx;
					line-height: 33rpx;
				}
				.item-name{
					text-align: center;
					font-size: 30rpx;
					color:#2c2c2c ;
					line-height: 30rpx;
					margin-top: -8rpx;
					width: 120rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
			}
		}
	}
	.btn-wrap {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		width: 100%;
		height: 82rpx;
		
		
		button {
			margin: 0 auto;
			width: 80%;
			background-image: none !important;
			background-color: #f03377;
			border-radius: 40rpx;
			height: 82rpx;
			width: 560rpx;
			line-height: 82rpx;
			font-size: 30rpx !important;
		}
	}
</style>
